<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
<!--    像HTML标签一样去使用 组件-->
    <my-com></my-com>
</div>

<!--为了更加方便的编写组件的html内容  我们创建了一个 template 标签-->
<template id="tem">
    <div>
        <h3>这是通过组件创建的模板内容</h3>
        <h2>hi</h2>
    </div>
</template>
<script>

    // 1.创建组件
    // var com1 = Vue.extend({
    //     template:"<h3>这是通过组件创建的模板内容</h3>"
    // })
    // 2.注册组件
    //注意1、：  如果组建的名字采用驼峰命名法，那么使用的时候将大写改为小写，并用-连接
    Vue.component("myCom", Vue.extend({
        //注意2、： template要求，有且只有一个根元素
        // template:"<div><h3>这是通过组件创建的模板内容</h3><h2>hi</h2></div>"

        //通过id选择器 选择template模板要展示的标签
        template: '#tem'
    }))

    var app = new Vue({
        el:"#app"
    })

</script>
</body>
</html>
